import { useState, useEffect, useRef } from 'react';
import Dropdown from '../Dropdown';

import { Link, useNavigate } from 'react-router-dom';

const MenuItems = ({ items, depthLevel }: any) => {
  const navigate = useNavigate()
  const isActive = useState<boolean>(false)
  const [dropdown, setDropdown] = useState(false);

  let ref: any = useRef();

  useEffect(() => {
    const handler = (event: { target: any; }) => {
      if (
        dropdown &&
        ref.current &&
        !ref.current.contains(event.target)
      ) {
        setDropdown(false);
      }
    };
    document.addEventListener('mousedown', handler);
    document.addEventListener('touchstart', handler);
    return () => {
      // Cleanup the event listener
      document.removeEventListener('mousedown', handler);
      document.removeEventListener('touchstart', handler);
    };
  }, [dropdown]);

  const onMouseEnter = () => {
    window.innerWidth > 960 && setDropdown(true);
  };

  const onMouseLeave = () => {
    window.innerWidth > 960 && setDropdown(false);
  };

  const closeDropdown = (e: any) => {
    console.log(e, "data")
    navigate('/', { state: { query: e } })
    setTimeout(() => {
      navigate(e.iconUrl, { state: { query: e } })
    })
    dropdown && setDropdown(false);
  };


  const clickDetail = (e: any, data: any) => {
    console.log(data, 'e')
    e.stopPropagation()
    navigate(data.iconUrl, { state: { query: data } })
  }

  return (
    <li
      className="menu-items w-36"
      ref={ref}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      onClick={() => { closeDropdown(items) }}
    >
      {items.url && items.children.length > 0 ? (
        <>
          <button
            type="button"
            aria-haspopup="menu"
            aria-expanded={dropdown ? 'true' : 'false'}
            onClick={() => setDropdown((prev) => !prev)}
          >
            {/* {window.innerWidth < 960 && depthLevel === 0 ? (
              items.name
            ) : (
              <Link to={items.url}>{items.name}</Link>
            )} */}

            {depthLevel > 0 &&
              window.innerWidth < 960 ? null : depthLevel > 0 &&
                window.innerWidth > 960 ? (
              <span>&raquo;</span>
            ) : (
              <span className="arrow" />
            )}
          </button>
          <Dropdown
            depthLevel={depthLevel}
            submenus={items.children}
            dropdown={dropdown}
          />
        </>
      ) : !items.url && items.children.length > 0 ? (
        <>
          <button
            type="button"
            aria-haspopup="menu"
            aria-expanded={dropdown ? 'true' : 'false'}
            onClick={() => setDropdown((prev) => !prev)}
          >
            {items.name}{' '}
            {depthLevel > 0 ? (
              <span>&raquo;</span>
            ) : (
              <span className="arrow" />
            )}
          </button>
          <Dropdown
            depthLevel={depthLevel}
            submenus={items.children}
            dropdown={dropdown}
          />
        </>
      ) : (
        <a className={items.active ? '' : 'inactive'} onClick={(e) => { clickDetail(e, items) }}>{items.name}</a>
      )}
    </li>
  );
};

export default MenuItems;
